<template>
  <div>
    <el-card>
      <span>余志峰</span>
      <el-row :gutter="21">
        <el-form label-width="80px">
          <el-col :span="6">
            <el-form-item label="关键字:">
              <el-input
                placeholder="根据文章标题搜索"
                v-model.trim="queryInfo.keyword"
                @clear="gettableAtrData"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 状态 -->
          <el-col :span="6">
            <el-form-item label="状态:">
              <el-select v-model="queryInfo.state" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="9">
            <el-button @click="clickBtn">清除</el-button>
            <el-button type="primary" @click="serchBtn">搜索</el-button>
          </el-col>
          <!-- 新增按钮 -->
          <el-col :span="3">
            <el-button
              type="success"
              icon="el-icon-edit"
              @click="DialogVisible = true"
              >新增按钮</el-button
            >
          </el-col>
        </el-form>
      </el-row>
      <!-- 提示标签语 -->
      <el-alert :title="countext" type="info" show-icon> </el-alert>
      <el-table :data="tableAtrData" style="width: 100%" class="table">
        <el-table-column prop="id" label="序号" width="120px">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width="340px">
          <template v-slot="{ row }">
            <p>
              {{ row.title }}
              <i
                class="el-icon-film"
                v-if="row.videoURL !== null"
                @click="showMask(row)"
              ></i>
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录人时间"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot="{ row }" prop="state">
            {{ row.state === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="{ row }">
            <el-button type="text" @click="previewFn(row)">预览</el-button>
            <el-button type="text" @click="disBtn(row)">{{
              row.state === 1 ? '启用' : '禁用'
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === 0 ? true : false"
              @click="editclick(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="row.state === 0 ? true : false"
              @click="clearBtn(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(page)"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="Number(pagesize)"
        layout="  prev, pager, next,sizes,jumper"
        :total="10"
        class="flooter"
      >
      </el-pagination>
      <!-- 遮罩层 -->
      <div class="mask" v-show="vedioMask">
        <div class="el-icon-close iconClose" @click="closeMask"></div>
        <video
          ref="video"
          :src="filmURl"
          class="video"
          autoplay="autoplay"
        ></video>
      </div>
      <!-- 新增用户 -->
      <el-dialog
        title="新增文章"
        :visible.sync="DialogVisible"
        width="50%"
        @close="closeAddDialog"
      >
        <el-form
          :rules="addFormRules"
          :model="addForm"
          label-width="100px"
          class="demo-ruleForm"
          ref="addFormRef"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor
              v-model="addForm.articleBody"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              class="conterion"
            >
            </quill-editor>
            <!-- <el-input v-model="addForm.articleBody"></el-input> -->
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="addForm.videoURL"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="DialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addClick">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 预览 -->
      <el-dialog title="预览文章" :visible.sync="previewDialog" width="60%">
        <h2>{{ this.previewData.title }}</h2>
        <span>
          {{ this.previewData.createTime | parseTimeByString }}
          &nbsp;&nbsp;</span
        >
        <span>{{ this.previewData.username }} &nbsp;&nbsp;</span>
        <i class="el-icon-view"> &nbsp;&nbsp;</i>
        <span> {{ this.previewData.visits }} </span>
        <div v-html="previewData.articleBody" class="preview"></div>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="新增文章" :visible.sync="editDialogVisible" width="50%">
        <el-form
          :rules="addFormRules"
          ref="editFormRef"
          :model="editForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="文章内容" prop="articleBody">
            <quill-editor
              v-model="editForm.articleBody"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              class="conterion"
            >
            </quill-editor>
            <!-- <el-input v-model="addForm.articleBody"></el-input> -->
          </el-form-item>
          <el-form-item label="视频地址" prop="videoURL">
            <el-input v-model="editForm.videoURL"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="eidtClick">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import moment from 'moment'
import {
  list,
  remove,
  changeState,
  add,
  detail,
  update
} from '../../api/hmmm/articles.js'
import { status } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      title: '',
      countext: '',
      tableAtrData: [],
      list,
      status,
      state: '',
      pagesize: '',
      page: '',
      previewData: {},
      queryInfo: {
        page: 1,
        pagesize: 10,
        state: null,
        keyword: null
      },
      DialogVisible: false,
      previewDialog: false,
      editDialogVisible: false,
      addFormRules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      addForm: {
        title: '',
        articleBody: '',
        videoURL: null
      },
      editForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      vedioMask: false,
      filmURl: null,
      play: true,
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote'], // 引用，代码块
            ['code-block', 'image', 'video'] // 上传图片、上传视频
          ]
        }
      }
    }
  },
  methods: {
    async gettableAtrData () {
      const res = await list(this.queryInfo)
      console.log(res)
      this.tableAtrData = res.data.items
      this.counts = res.data.counts
      this.countext = `共${this.counts}数据`
      res.data.items.forEach(item => {
        item.createTime = moment(item.createTime).format('YYYY-MM-DD')
      })
    },
    async addClick () {
      const { data: res } = await add(this.addForm)
      console.log(res)
      this.DialogVisible = false
    },
    async eidtClick () {
      const res = await update(this.editForm)
      // console.log(res)
      if (res.status !== 200) return this.$message.error('修改成功失败')
      this.gettableAtrData()
      this.editDialogVisible = false
    },
    // 禁用按钮
    async disBtn (row) {
      if (row.state === 0) {
        row.state = 1
        return this.$message.success('操作成功')
      } else if (row.state === 1) {
        row.state = 0
        return this.$message.success('操作成功')
      }
      const { dara: res } = await changeState(row)
      console.log(res)
    },
    // 预览按钮
    async previewFn (row) {
      console.log(row)
      this.previewData = row
      this.previewDialog = true
    },
    // 关闭对话框清空
    closeEditDialog () {
      this.$refs.editFormRef.resetFields()
      this.addForm.videoURL = ''
    },
    closeAddDialog () {
      this.$refs.addFormRef.resetFields()
      this.addForm.videoURL = ''
    },
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.gettableAtrData()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage
      this.gettableAtrData()
    },
    // 清除按钮
    clickBtn () {
      this.queryInfo.keyword = ''
      this.queryInfo.state = ''
      this.queryInfo.page = 1
      this.queryInfo.pagesize = 10
      this.gettableAtrData()
      return this.$message.success('已清除所有内容！')
    },
    // 修改按钮
    async editclick (row) {
      this.editDialogVisible = true
      const res = await detail(row)
      console.log(res)
      if (res.status !== 200) return this.$message.error('修改失败')
      this.editForm = res.data
    },
    // 删除按钮
    async clearBtn (row) {
      const configDelete = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (configDelete !== 'confirm') {
        return this.$message.info('您取消操作')
      }
      try {
        const { data } = await remove(row)
        console.log(data)
        this.gettableAtrData()
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    // 搜索按钮
    serchBtn () {
      this.gettableAtrData()
      // console.log(this.gettableAtrData())
    },
    // videoURL
    async showMask (row) {
      this.play = true
      this.vedioMask = true
      this.filmURl = row.videoURL
    },
    // 遮罩层
    closeMask () {
      this.$refs.video.pause()
      this.vedioMask = false
    },
    onEditorBlur () {
      // 失去焦点事件
    },
    onEditorFocus () {
      // 获得焦点事件
    },
    onEditorChange () {
      // 内容改变事件
    }
  },
  created () {
    this.gettableAtrData()
  }
}
</script>

<style scoped lang="less">
.el-card {
  padding: 5px;
  margin: 20px;
}

.el-alert {
  margin: 15px 0 20px;
}
.flooter {
  margin-top: 20px;
}
.conterion {
  height: 300px;
}
.el-icon-film {
  color: blue;
}
.video {
  width: 800px;
  height: 400px;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}
.iconClose {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 20px;
  left: 50%;
  border-radius: 25px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
</style>
